<template>
  <div>
    <div v-if="Number(count) > 0" class="circle c-pa"
      :class="[count < 100 ? 'c-lh26' : (maxShowNumber ? 'c-lh26' : 'pointStyle'), circleStyle ? circleStyle : 'circleBg c-fc-white']"
      :style="coordinateStyle"
    >{{count < 100 ? count : (maxShowNumber ? count : '...') }}</div>
  </div>
</template>

<script>
export default {
  name: 'circleCount',
  props: {
    count: { // 数量
      type: Number,
      default: 0
    },
    coordinate: { // 坐标 [left, top]
      type: Array,
      default: null
    },
    circleStyle: { // 自定义背景、文字颜色
      type: String,
      default: ''
    },
    maxShowNumber: { // 超过三位数是否展示数值
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
    }
  },
  computed: {
    coordinateStyle() {
      if (this.coordinate && this.coordinate.length == 2) {
        return `left: ${this.coordinate[0]}rem;top: ${this.coordinate[1]}rem;`
      } else {
        return `left: 0.5rem;top: -0.1rem`
      }
    }
  }
};
 </script>


<style scoped>
.c-lh12 {line-height: 0.3rem;}
.circle {
  padding: 0 0.15rem;
  border-radius: 0.55rem;
  border: 1px solid white;
  font-size: 0.45rem;
  display: inline-block;
  white-space: nowrap;
  min-width: 0.7rem;
  text-align: center;
  height: 0.7rem;
  padding-bottom: 0.1rem;
}
.circleBg {
  background-color: #f83039;
}
.pointStyle {
  line-height: 0.05rem;
  height: 0.65rem;
}
</style>
